<!DOCTYPE html>
<html ng:controller="CoreRootController">
    <head>
        <title ng:bind="pageTitle + (pageTitle ? ' | ' : '') + identity.machine.name"></title>
        <link rel="shortcut icon" />
        <link rel="manifest" href="/api/core/web-manifest" />

        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="theme-color" content="{{themeColorValue}}">
        <meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, height=device-height, minimal-ui" />

        <link rel="stylesheet" href="%(prefix)s/resources/all.vendor.css" type="text/css">
        <link rel="stylesheet" href="%(prefix)s/resources/all.css" type="text/css">
        <link rel="stylesheet" href="%(prefix)s/resources/core/resources/vendor/fontawesome/css/font-awesome.min.css" type="text/css">
        <link rel="stylesheet" href="%(prefix)s/resources/core/resources/vendor/pt-sans/styles/pt_sans.css" type="text/css">

        <script src="%(prefix)s/resources/all.vendor.js" type="text/javascript"></script>
        <script src="%(prefix)s/resources/all.init.js" type="text/javascript"></script>
        <script src="%(prefix)s/resources/all.js" type="text/javascript"></script>
        <script src="%(prefix)s/resources/all.partials.js" type="text/javascript"></script>

        <style>
            [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
              display: none !important;
            }
        </style>
    </head>
    <body class="global-color-{{identity.color || 'default'}} widescreen-mode-{{isWidescreen ? 'on' : 'off'}} {{customization.plugins.core.bodyClass}}">
        <nav class="navbar navbar-default navbar-fixed-top" ng:show="appReady" ng:cloak>
            <div class="container">
                <a ng:click="toggleNavigation()" ng:show="navigationPresent" class="navbar-brand navigation-toggle hide-phone hide-tablet">
                    <i class="fa fa-navicon"></i>
                </a>

                <a ng:click="toggleOverlayNavigation()" ng:show="navigationPresent" class="navbar-brand navigation-toggle hide-desktop hide-large">
                    <i class="fa fa-navicon"></i>
                </a>

                <a class="navbar-brand" ng:href="{{urlPrefix}}/view/" ng:if="customization.plugins.core.logoURL">
                    <img ng:src="{{customization.plugins.core.logoURL}}" />
                </a>


                <a class="navbar-brand ellipsis" ng:href="{{urlPrefix}}/view/">
                    <span class="title">
                        {{customization.plugins.core.title || 'Ajenti'}}
                    </span> <span class="subtitle hide-phone hide-tablet">{{pageTitle|translate}}</span>
                </a>

                <a ng:click="toggleWidescreen()" class="hide-phone hide-tablet navbar-btn btn btn-default btn-flat pull-right">
                    <i class="fa fa-expand" ng:if="!isWidescreen"></i>
                    <i class="fa fa-compress" ng:if="isWidescreen"></i>
                </a>

                <div ng:show="identity.user" class="pull-right">
                    <div uib-dropdown>
                        <a class="btn btn-default profile-button" ng:class="{superuser: identity.isSuperuser}" uib-dropdown-toggle>
                            {{identity.user[0].toUpperCase()}}

                            <span class="rank" ng:show="identity.isSuperuser">
                                <i class="fa fa-angle-double-up"></i>
                            </span>
                        </a>
                        <ul uib-dropdown-menu class="dropdown-menu-right" style="width: 200px">
                            <li>
                                <div>
                                    <span class="subtle pull-right">UID {{ identity.effective }}</span>
                                    <i class="fa fa-fw fa-user"></i> {{ identity.user }}
                                </div>
                            </li>
                            <li class="hide-tablet hide-desktop hide-large">
                                <div>
                                    <i class="fa fa-fw fa-hdd-o"></i> {{ identity.machine.name }}
                                </div>
                            </li>
                            <li ng:repeat="item in customization.plugins.core.extraProfileMenuItems">
                                <a href="{{item.url}}">
                                    <i class="fa fa-fw fa-{{item.icon}}"></i> {{ item.name }}
                                </a>
                            </li>
                            <li>
                                <a ng:click="identity.elevate()" ng:show="identity.effective != 0 && identity.elevation_allowed">
                                    <i class="fa fa-fw fa-angle-double-up"></i> <span translate>Elevate</span>
                                </a>
                            </li>
                            <li>
                                <a ng:click="identity.logout()">
                                    <i class="fa fa-fw fa-power-off"></i> <span translate>Log out</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <p class="navbar-text pull-right hide-phone">
                    <i class="fa fa-hdd-o"></i> {{ identity.machine.name }}
                </p>
            </div>
        </nav>

        <div class="container" ng:show="appReady">
            <div class="row">
                <div class="col-md-3 sidebar hide-tablet hide-phone" ng:show="showSidebar && navigationPresent">
                    <ng:include src="'/core:resources/partial/sidebarTasks.html'"></ng:include>
                    <core:sidebar></core:sidebar>
                </div>
                <div ng:view class="content" ng-swipe-right="toggleOverlayNavigation(true)" ng-swipe-left="toggleOverlayNavigation(false)">
                </div>
            </div>

            <div class="sidebar overlay-sidebar animate-sidebar hide-desktop hide-large" ng:show="showOverlaySidebar && navigationPresent" ng-swipe-left="toggleOverlayNavigation(false)">
                <ng:include src="'/core:resources/partial/sidebarTasks.html'"></ng:include>
                <core:sidebar></core:sidebar>
            </div>
        </div>

        <toaster-container></toaster-container>

        <messagebox-container></messagebox-container>

        <div ng:controller="CoreNavboxController" ng:cloak>
            <div class="navbox-overlay" ng:if="visible">
                <div class="navbox-box">
                    <input ng:model="$parent.query" ng:model-options="{debounce: 500}" ng:keyup="onSearchboxKeyUp($event)" ng:keydown="onSearchboxKeyDown($event)" type="search" autofocus class="form-control" placeholder="{{'Quick search'|translate}}" />
                    <div class="list-group">
                        <a ng:repeat="result in results|rankMatch:'title|translate':query" ng:href="{{urlPrefix}}{{result.url}}" ng:click="open(result)" class="list-group-item">
                            <code class="navbox-hotkey pull-right" ng:if="$index < 10 && $index > 0">Shift - {{$index}}</code>
                            <code class="navbox-hotkey pull-right" ng:if="$index == 0" translate>Enter</code>
                            <i class="fa fa-fw fa-{{result.icon}}"></i> {{result.title|translate}}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="global-overlay global-loading-overlay" ng:hide="appReady">
            <progress-spinner></progress-spinner>
        </div>

        <div class="global-overlay global-bootstrap-error" style="display: none">
            <div class="text-center">
                <span class="header">
                    <i class="fa fa-warning"></i>
                </span>
                <h1 translate>
                    A bootstrap error has occured
                </h1>
                <div translate>
                    Please see browser console
                </div>
                <div>
                    <i class="fa fa-arrow-down"></i>
                </div>
            </div>
        </div>

        <div class="modal fade global-bootstrap-recovered in hidden">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>Warning</h4>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning">
                            The following plugin has failed to load: <strong class="plugin-name"></strong>. Please fix or uninstall it.
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-default btn-flat btn-close" translate>OK</a>
                    </div>
                </div>
            </div>
        </div>

        <script>
            angular.module('core').constant('urlPrefix', '%(prefix)s');
            angular.module('core').constant('ajentiPlugins', %(plugins)s);
            angular.module('core').constant('initialConfigContent', %(config)s);
            angular.module('core').constant('ajentiPlatform', '%(platform)s');
            angular.module('core').constant('ajentiPlatformUnmapped', '%(platformUnmapped)s');
            angular.module('core').constant('ajentiVersion', '%(version)s');
            angular.module('core').constant('ajentiBootstrapColor', '%(bootstrapColor)s');

            angular.element(document).ready(ajentiBootstrap);
        </script>
    </body>
</html>
